<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix='fmt' uri='http://java.sun.com/jsp/jstl/fmt' %>
<%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ page import="java.util.Date"%>
<script>
    function formatar(mascara, documento) {
        var i = documento.value.length;
        var saida = mascara.substring(0, 1);
        var texto = mascara.substring(i)

        if (texto.substring(0, 1) != saida) {
            documento.value += texto.substring(0, 1);
        }
    }
</script>
<h4>Novo Cliente</h4>
<form action="controladora?action=FimCadastroCliente" method="POST">
    <table class="apresentacao" style="width: 100%">
        <col style="width: 150px" />
        <col />
        <tr>
            <th>
                Nome:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtNome" />
            </td>
        </tr>
        <tr>
            <th>
                CPF:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtCPF" onkeypress="formatar('###.###.###-##', this);" size="14" maxlength="14"/>
            </td>
        </tr>
        <tr>
            <th>
                Nascimento:
            </th>
            <td style="text-align: left">
                <input type="date" name="txtNascimento" onkeypress="formatar('##/##/####', this);" size="10" maxlength="10"/>
            </td>
        </tr>
        <tr>
            <th>
                Sexo:
            </th>
            <td style="text-align: left">
                <input type="radio" name="sex" value="masc">Masculino<br>
                <input type="radio" name="sex" value="fem">Feminino
            </td>
        </tr>
        <tr>
            <th>
                Rua:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtRua" />
            </td> 
        </tr>
        <tr>
            <th>
                Nº:
            </th>
            <td style="text-align: left">
                <input type="number" name="txtNumero" />
            </td>
        </tr>
        <tr>
            <th>
                Cidade:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtCidade" />
            </td>
        </tr>
        <tr>
            <th>
                UF:
            </th>
            <td style="text-align: left">
                <select name="txtUF" >
                    <c:forEach var="estado" items="${estados}">      
                        <option value="${estado.ID}">${estado.descricao}</option>      
                    </c:forEach>   
                </select>
            </td>
        </tr>
        <tr>
            <th>
                E-mail:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtEmail" />
            </td>
        </tr>
        <tr>
            <th>
                Cep:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtCep" />
            </td>
        </tr>
        <tr>
            <th>
                Bairro:
            </th>
            <td style="text-align: left">
                <input type="text" name="txtBairro" />
            </td>
        </tr>
    </table>
    <br>
    <table style="width: 100%">
        <tr>
            <td style="text-align: left">
                <input type="submit" name="btnSalvar" class="laranja medio" value="Salvar" />
            </td>
            <td style="text-align: right">
                <input type="submit" name="btnVoltar" class="laranja medio" value="Voltar"/>
            </td>
        </tr>
    </table>
</form>

